<template>
    <view class="content">
        <text class="title">API请求示例</text>

        <view class="section">
            <text class="section-title">用户列表</text>
            <button @click="fetchUserList" class="btn">获取用户列表</button>
            <button @click="clearUserList" class="btn secondary">清空列表</button>

            <view v-if="loading" class="loading">
                <text>加载中...</text>
            </view>

            <view v-else class="user-list">
                <view v-for="user in userList" :key="user.id" class="user-item" @click="fetchUserDetail(user.id)">
                    <text>{{ user.name }} ({{ user.email }})</text>
                </view>
            </view>
        </view>

        <view class="section" v-if="userDetail.id">
            <text class="section-title">用户详情</text>
            <view class="user-detail">
                <text>姓名: {{ userDetail.name }}</text>
                <text>邮箱: {{ userDetail.email }}</text>
                <text>电话: {{ userDetail.phone }}</text>
                <text>网站: {{ userDetail.website }}</text>
                <text>公司: {{ userDetail.company?.name }}</text>
                <text>地址: {{ userDetail.address?.city }}, {{ userDetail.address?.street }}</text>
            </view>
            <button @click="clearUserDetail" class="btn secondary">清空详情</button>
        </view>

        <view class="section">
            <text class="section-title">创建用户</text>
            <input v-model="newUser.name" placeholder="姓名" class="input" />
            <input v-model="newUser.email" placeholder="邮箱" class="input" />
            <input v-model="newUser.phone" placeholder="电话" class="input" />
            <button @click="createUser" class="btn">创建用户</button>
        </view>
        
        <!-- 引入自定义tabBar -->
        <CustomTabBar />
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import userApi from '../../api/user.js'

// 页面显示时通知tabBar更新选中状态
onShow(() => {
  uni.$emit('updateTabBar', 'views/api/api-demo')
})

// 响应式数据
const userList = ref([])
const userDetail = ref({})
const loading = ref(false)
const newUser = reactive({
    name: '',
    email: '',
    phone: ''
})

// 获取用户列表
const fetchUserList = async () => {
    loading.value = true
    const res = await userApi.getUserList({ _limit: 5 })
    userList.value = res
    loading.value = false
}

// 清空用户列表
const clearUserList = () => {
    userList.value = []
}

// 获取用户详情
const fetchUserDetail = async (id) => {
    const res = await userApi.getUserById(id)
    userDetail.value = res
}

// 清空用户详情
const clearUserDetail = () => {
    userDetail.value = {}
}

// 创建用户
const createUser = async () => {
    if (!newUser.name || !newUser.email) {
        uni.showToast({
            title: '请填写必要信息',
            icon: 'none'
        })
        return
    }

    const res = await userApi.createUser({
        name: newUser.name,
        email: newUser.email,
        phone: newUser.phone
    })

    // 将新用户添加到列表中
    userList.value.unshift(res)

    // 清空表单
    newUser.name = ''
    newUser.email = ''
    newUser.phone = ''
}
</script>

<style>
.content {
    padding: 40rpx;
    padding-bottom: 120rpx; /* 为tabBar留出空间 */
}

.title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    display: block;
}

.section {
    margin-bottom: 60rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.input {
    border: 1rpx solid #ccc;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
}

.btn {
    background-color: #007aff;
    color: white;
    border: none;
    padding: 20rpx;
    margin: 20rpx 0;
    border-radius: 10rpx;
    width: 100%;
}

.btn.secondary {
    background-color: #8e8e93;
}

.loading {
    text-align: center;
    padding: 40rpx 0;
}

.user-list {
    margin-top: 20rpx;
}

.user-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
    background-color: #f8f8f8;
    margin-bottom: 10rpx;
    border-radius: 10rpx;
}

.user-item:last-child {
    border-bottom: none;
}

.user-detail {
    background-color: #f8f8f8;
    padding: 30rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
}

.user-detail text {
    display: block;
    margin: 10rpx 0;
    font-size: 28rpx;
}
</style>